/*
 * @Description: 页面主体
 * @Author: YWJ 
 * @Date: 2022-04-20 14:24:11 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-16 14:43:29
 */

<template>
  <div>
    <!-- 左右布局 -->
    <el-container>
      <el-main class="me-articles">
        <ArticleScrollPage></ArticleScrollPage>
      </el-main>

      <el-aside>
        <div style="position: fixed; top: 100px">
          <CardMe></CardMe>
          <card-tag :tags="hotTags"></card-tag>
          <!-- <card-article
          cardHeader="最热推文"
          :articles="hotArticles"
        ></card-article> -->
          <card-archieve
            cardHeader="点赞榜"
            :articles="archives"
          ></card-archieve>
          <!-- <card-article
          cardHeader="最新推文"
          :articles="newArticles"
        ></card-article> -->
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import ArticleScrollPage from "@/components/common/ArticleScrollPage";
import CardMe from "@/components/card/CardMe.vue";
import CardTag from "@/components/card/CardTag.vue";
import CardArticle from "@/components/card/CardArticle.vue";
import CardArchive from "@/components/card/CardAchieve.vue";
import { getArticles, getLikeMostArticles, getHotTag } from "@/api/article.js";
export default {
  components: {
    ArticleScrollPage,
    CardMe,
    "card-tag": CardTag,
    "card-article": CardArticle,
    "card-archieve": CardArchive,
  },
  data() {
    return {
      innerPage: {
        pageNum: 1,
        limit: 3,
        tag: "11",
        account: localStorage.getItem("account"),
      },
      likePage: {
        pageNum: 1,
        limit: 3,
        account: localStorage.getItem("account"),
      },
      hotTags: [],
      hotArticles: [],
      newArticles: [],
      archives: [],
    };
  },
  created() {
    setTimeout(() => {
      this.getHotTags();
      this.getArchives();
    }, 300);
  },
  methods: {
    getHotTags() {
      getHotTag().then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.hotTags = res.data.data.slice(0, 4);
        } else {
          console.log("no");
        }
      });
    },

    getHotArticles() {},
    getNewArticles() {
      getArticles(this.innerPage).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.newArticles = res.data.data.list;
          console.log(111);
        } else {
          console.log("no");
        }
      });
    },
    getArchives() {
      getLikeMostArticles(this.likePage).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.archives = res.data.data.list;
          console.log(111);
        } else {
          console.log("no");
        }
      });
    },
  },
};
</script>

<style>
.el-container {
  width: 100%;
}

.el-aside {
  margin-left: 100px;
  width: 260px;
}

.el-main {
  padding: 0px;
  line-height: 16px;
  width: 700px;
}

.el-card {
  border-radius: 0;
}

.el-card:not(:first-child) {
  margin-top: 20px;
}
</style>